<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: url("img/bg.webp") no-repeat;
			}
			div {
				box-sizing: border-box;
			}
			.team {
				/* 四个人的总体宽高是多少? */
				width: 780px;
				height: 240px;
				margin: 300px auto;
			}
			.man {
				float: left;
				width: 25%;
				height: 100%;
			}
			.man:nth-child(1) {
				background: url("img/west_01.png") no-repeat;
				animation: monkey 1s steps(8) infinite;
				background-position: 0 center;
			}
			.man:nth-child(2) {
				background: url("img/west_02.png") no-repeat;
				animation: pig 1s steps(8) infinite;
				background-position: 0 center;
			}
			.man:nth-child(3) {
				background: url("img/west_03.png") no-repeat;
				animation: tomson 1s steps(8) infinite;
				background-position: 15px center;
			}
			.man:nth-child(4) {
				background: url("img/west_04.png") no-repeat;
				animation: shason 1s steps(8) infinite;
				background-position: 0 bottom;
			}
			@keyframes monkey {
				100%{
					background-position: -1600px center;
				}
			}
			@keyframes pig {
				100%{
					background-position: -1600px center;
				}
			}
			@keyframes tomson {
				100%{
					background-position: -1360px center;
				}
			}
			@keyframes shason {
				100%{
					background-position: -1680px bottom;
				}
			}
		</style>
	</head>
	<body>
		<div class="team">
			<div class="man"></div>
			<div class="man"></div>
			<div class="man"></div>
			<div class="man"></div>
		</div>
	</body>
</html>
